<template>
    <!-- 容器 -->
    <div class="echarts" ref="charts">

    </div>
</template>

<script>
    //引入echarts模块
    import echarts from 'echarts'
    export default {
        name:'barCharts',
        mounted() {
            //初始化echarts
            let lineCharts = echarts.init(this.$refs.charts)
            //配置
            lineCharts.setOption({
                xAxis:{
                    show:false,
                    //最值
                    min:0,
                    max:100,
                },
                yAxis:{
                    show:false,
                    type:'category'

                },
                //系列
                series:[
                    {
                       //形式
                       type:'bar',
                       data:[78],
                       color:'yellowgreen',
                       //柱状图宽度
                       barWidth:10,
                       //背景颜色
                       showBackground:true,
                       backgroundStyle:{
                        color:'#eee'
                       },
                       //文本
                       label:{
                        show:true,
                        //改变文本内容
                        formatter:'|',
                        position:'right'
                       }
                    }
                ],
                //布局调试
                grid:{
                    left:0,
                    top:0,
                    right:0,
                    bottom:0
                }
            })
        },
    }
</script>

<style>
    .echarts{
        width: 100%;
        height: 100%;
    }
</style>